<template>
    <div class="problem-list">
      <el-card v-if="problems.length === 0" class="no-problems-card">
        <div class="no-problems-content">
          <!-- <img src="@/assets/no-problems.png" alt="No Problems" class="no-problems-image" /> -->
          <el-empty description="暂无上报问题"></el-empty>
        
        </div>
      </el-card>
      <el-card class="problem-card" v-for="problem in problems" :key="problem.description">
        <div slot="header" class="clearfix">
          <span class="problem-title">{{ problem.description }}</span>
          <el-tag :type="getTagType(problem.urgency)" class="problem-urgency">{{ problem.urgency }}</el-tag>
        </div>
        <div class="problem-details">
          <p><strong>提交时间:</strong> {{ formatTime(problem.createTime) }}</p>
          <p v-if="problem.finished === 2"><strong>完成时间:</strong> {{ formatTime(problem.fininshTime) }}</p>
          <p><strong>问题描述:</strong> {{ problem.description }}</p>
          <p><strong>指派给:</strong> {{ problem.name }}</p>
        </div>
        <el-steps :active="getStatusIndex(problem.finished)" align-center class="problem-progress">
          <el-step title="已提交" description="问题已提交"></el-step>
          <el-step title="处理中" description="问题正在处理中"></el-step>
          <el-step title="已完成" description="问题已处理完成"></el-step>
        </el-steps>
        <div class="problem-actions">
          <el-button type="danger" @click="cancelProblem(problem.problemid)" :disabled="problem.finished !== 0">撤销</el-button>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    name: 'ProblemShow',
    data() {
      return {
        problems: []
      };
    },
    created() {
      this.fetchProblems();
    },
    methods: {
      fetchProblems() {
        axios.get('/api/system/getProblems')
          .then(response => {
            if (response.data.code === 200) {
              this.problems = response.data.data.map(problem => ({
                name: problem.name,
                urgency: this.mapUrgency(problem.urgency),
                createTime: new Date(problem.createTime).getTime(),
                fininshTime: problem.fininshTime ? new Date(problem.fininshTime).getTime() : null,
                description: problem.description,
                finished: problem.finished,
                problemid: problem.problemid
              }));
            } else {
              this.$message.error('获取问题列表失败');
            }
          })
          .catch(error => {
            console.error('获取问题列表失败', error);
            this.$message.error('获取问题列表失败');
          });
      },
      mapUrgency(urgency) {
        switch (urgency) {
          case 'high':
            return '高';
          case 'medium':
            return '中';
          case 'low':
            return '低';
          default:
            return '未知';
        }
      },
      getTagType(urgency) {
        switch (urgency) {
          case '低':
            return 'success';
          case '中':
            return 'warning';
          case '高':
            return 'danger';
          default:
            return '';
        }
      },
      formatTime(time) {
        if (!time) return '未完成';
        const date = new Date(time);
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
      },
      getStatusIndex(finished) {
        switch (finished) {
          case 0:
            return 1;
          case 1:
            return 2;
          case 2:
            return 3;
          default:
            return 0;
        }
      },
      cancelProblem(problemid) {
        this.$confirm('确定要撤销该问题吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/system/cancelProblem', { problemid })
            .then(response => {
              if (response.data.code === 200) {
                this.$message({
                  message: '问题撤销成功',
                  type: 'success'
                });
                this.fetchProblems(); // 重新获取问题列表
              } else {
                this.$message.error('问题撤销失败');
              }
            })
            .catch(error => {
              console.error('问题撤销失败', error);
              this.$message.error('问题撤销失败');
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          });
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .problem-list {
    padding: 20px;
  }
  
  .problem-card {
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .problem-title {
    font-size: 1.2em;
    font-weight: bold;
  }
  
  .problem-urgency {
    float: right;
  }
  
  .problem-details {
    margin-bottom: 20px;
  }
  
  .problem-progress {
    margin-top: 20px;
  }
  
  .problem-actions {
    margin-top: 20px;
    text-align: right;
  }
  
  .no-problems-card {
    text-align: center;
    padding: 20px;
  }
  
  .no-problems-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .no-problems-image {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
  }
  
  .no-problems-text {
    font-size: 1.2em;
    color: #909399;
  }
  </style>
  